/*! _helpers.scss | Vuero | Css ninja 2020-2021 */

/*
    1. Spacing helpers
    2. Color helpers
    3. Shadow helpers
    4. Dark helpers
    5. Radius helpers
*/

/* ==========================================================================
1. Spacing helpers
========================================================================== */

$spaceamounts: 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100;
$sides: top, bottom, left, right;

@each $space in $spaceamounts {
  @each $side in $sides {
    .m-#{str-slice($side, 0, 1)}-#{$space} {
      margin-#{$side}: #{$space}px !important;
    }

    .p-#{str-slice($side, 0, 1)}-#{$space} {
      padding-#{$side}: #{$space}px !important;
    }
  }
}

.no-padding-all {
  padding: 0 !important;
}

.no-padding-top {
  padding-top: 0 !important;
}

.no-padding-bottom {
  padding-bottom: 0 !important;
}

.no-padding-left {
  padding-left: 0 !important;
}

.no-padding-right {
  padding-right: 0 !important;
}

.no-margin-all {
  margin: 0 !important;
}

.no-margin-top {
  margin-top: 0 !important;
}

.no-margin-bottom {
  margin-bottom: 0 !important;
}

.no-margin-left {
  margin-left: 0 !important;
}

.no-margin-right {
  margin-right: 0 !important;
}

.has-fullheight {
  height: 100%;
}

.has-fullwidth {
  width: 100%;
}

.no-scroll {
  overflow: hidden !important;
}

.has-help-cursor {
  cursor: help;
}

/* ==========================================================================
2. Color helpers
========================================================================== */

// .text { AnalyticsDashboard
//   @each $name, $hex in $vuero-colors {
//     &-#{$name} {
//       color: $hex !important;
//     }
//   }
// }

.has-text-secondary {
  color: var(--secondary) !important;
}
.has-background-secondary {
  background-color: var(--secondary) !important;
}

// /* ==========================================================================
// 3. Shadow helpers
// ========================================================================== */

.has-light-shadow {
  box-shadow: var(--light-box-shadow);

  &.has-light-border {
    border: 1px solid var(--fade-grey-dark-3);
  }
}

/* ==========================================================================
4. Dark helpers
========================================================================== */

.is-dark {
  //Card border helper
  .is-dark-card-bordered,
  .is-dark-bordered-12 {
    border-color: var(--dark-sidebar-light-12) !important;
  }

  //Primary Helper
  .is-dark-primary {
    color: var(--primary) !important;
  }

  .is-dark-primary-hover:hover {
    color: var(--primary) !important;
  }

  //BG Helpers
  .is-dark-bg-1 {
    background: var(--dark-sidebar-light-1) !important;
  }

  .is-dark-bg-2 {
    background: var(--dark-sidebar-light-2) !important;
  }

  .is-dark-bg-3 {
    background: var(--dark-sidebar-light-3) !important;
  }

  .is-dark-bg-4 {
    background: var(--dark-sidebar-light-4) !important;
  }

  .is-dark-bg-5 {
    background: var(--dark-sidebar-light-5) !important;
  }

  .is-dark-bg-6 {
    background: var(--dark-sidebar-light-6) !important;
  }
}

/* ==========================================================================
4. Radius helpers
========================================================================== */

.radius-5 {
  border-radius: 0.5rem;
}

.radius-75 {
  border-radius: 0.75rem;
}

.radius-full {
  border-radius: var(--radius-rounded);
}

/* ==========================================================================
5. Size helpers
========================================================================== */

.max-w-540 {
  max-width: 540px;
}
